<template>
  <el-container style="height: 100%;">
    <el-header class="head">
      
     <div class="right">
        <el-image style="height: 22px;" :src="icon"></el-image>
        <span style="margin-left: 5px">个人交易系统</span>
      </div>

      <div class="right">
        <el-button type="primary" class="button" :icon="SemiSelect" :onclick="miniWindow" />
        <el-button type="primary" v-if="!ismax" class="button" :icon="FullScreen" :onclick="maxWindow" />
        <el-button type="primary" v-if="ismax" style="transform: rotate(180deg);" class="button" :icon="CopyDocument" :onclick="maxWindow" />
        <el-button type="primary" class="button" :icon="Close" :onclick="closeWindow" />
      </div>
    </el-header>

    <el-container style="height: 100%;">
      <sideLeft></sideLeft>
      <el-container class="main">
        <RouterView />
      </el-container>
    </el-container>

    <el-footer class="foot">333</el-footer>
  </el-container>

</template>

<script setup lang="ts">
import sideLeft from '@/components/layout/sideLeft.vue'
import icon from "@/assets/icon.ico"
import {
  Close, FullScreen, SemiSelect, CopyDocument
} from '@element-plus/icons-vue'
import { ref } from 'vue';

const ismax = ref(false);


declare global {
  interface Window {
    electronAPI: any;
  }
}

const closeWindow = () => {
  window.electronAPI?.close()
}

const miniWindow = () => {
  window.electronAPI?.minimize()
}

const maxWindow = () => {
  ismax.value = !ismax.value
  window.electronAPI?.maximize()
}


defineOptions({});
</script>

<style scoped>
.head {
  padding-left: 1px;
  background-color: #E3E3E3;
  height: 32px;
  line-height: 32px;
  -webkit-app-region: drag;
  padding-right: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中对齐 */
  font-size: 12px;
}

.head .left {
  display: flex;
  /* 左侧容器 */
  align-items: center;
  -webkit-app-region: no-drag;
  /* 防止拖拽 */
}

.head .right {
  display: flex;
  /* 右侧容器 */
  align-items: center;
}

.footer {
  height: 1px;
  background-color: #E3E3E3;
}


.head button {
  background-color: #E3E3E3;
  margin-top: 2px;
  font-size: 18px;
  color: rgb(55, 57, 59);
  -webkit-app-region: no-drag;
  width: 10px;
  border: 0px;
  margin: 0px;
  margin-left: auto;
  /* 按钮靠右 */
}

.main {
  padding: 6px;
  background-color: rgb(243, 243, 243);
  border: 2px #E3E3E3 solid;
  border-left: 0px;
  border-top: 0px;
}

.full-height {
  height: auto;
}

#nprogress .bar {
  background: #29d;
  position: fixed;
  z-index: 1031;
  top: 32px;
  left: 0px;
  width: 100%;
  height: 2px;
}

.foot {
    height: 20px;
    line-height: 20px;
    text-align: right;
    padding: 0px;
    padding-left: 5px;
    font-size: 12px;
    background-color: rgb(252, 250, 248);
}
</style>
